<template>
  <div class="assign-permission">
    <!-- 树形结构 -->
    <!-- show-checkbox  -->
    <!-- check-strictly  -->
    <!-- node-key  -->
    <div class="my-tre">
      <el-tree
        ref="treeRef"
        :data="list"
        show-checkbox
        check-strictly
        node-key="id"
        :props="defaultProps"
        @node-click="handleNodeClick"
      />
    </div>
    <!-- 按钮 -->
    <div class="permission-btn">
      <el-button size="medium" @click="$emit('close')">取消</el-button>
      <el-button size="medium" type="primary" @click="onSubmit">确定</el-button>
    </div>
  </div>
</template>

<script>
import { getPermissionRequest } from '@/api/permission'
import { transformListToTree2 } from '@/utils/index'
import { assignPermissionRequest, getRoleDetailByIdRequest } from '@/api/setting'
export default {
  name: 'AssignPermission',
  props: {
    // 获取父组件传递过来的当前所点击的角色的 id
    currentId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      // 树形组件绑定的数据
      list: [],
      // 每一项默认绑定的数据
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    }
  },
  created() {
    this.getPermission() // 获取所有权限点列表
  },
  methods: {
    // ^ ==================== 请求 ====================
    // 请求 - 获取所有权限点列表
    async getPermission() {
      try {
        // 获取所有权限点列表
        const res = await getPermissionRequest()
        if (res.success) {
          this.list = transformListToTree2(res.data, '0')
        } else {
          this.$message.error('获取所有权限点失败!')
        }
        // 数据回显 - 根据 ID 获取角色详情
        // 如果请求成功, 就将返回值里面的数组赋值给树形组件进行回显
        // setCheckedKeys() 方法
        // 通过 key 设置某个节点的当前选中状态，使用此方法必须设置 node-key 属性
        const res2 = await getRoleDetailByIdRequest(this.currentId)
        if (res2.success) {
          // console.log(res2)
          console.log(this.currentId)
          this.$refs.treeRef.setCheckedKeys(res2.data?.permIds || []) // 逻辑中断与兼容处理
        } else {
          this.$message.error(res2.message || '获取当前用户角色详情失败')
        }
      } catch (error) {
        console.log('获取所有权限点失败', error)
      }
    },
    // 请求 - 为角色分配权限 (需要传两个参数)
    // id: currentId 当前角色的 id
    // permIds: getCheckedKeys() 方法可以返回目前被选中的节点的 key 所组成的数组
    async assignPermission() {
      try {
        const res = await assignPermissionRequest({
          id: this.currentId,
          permIds: this.$refs.treeRef.getCheckedKeys() // 目前被选中的节点的 key 所组成的数组
        })
        if (res.success) {
          this.$message.success('分配角色权限成功!')
          this.$emit('close') // 关闭模态框
        } else {
          this.$message.error(res.message || '为角色分配权限失败!')
        }
      } catch (error) {
        console.log('分配权限失败', error)
      }
    },
    // ^ ==================== 事件 ====================
    // 事件 - 提交
    // 若节点可被选择（即 show-checkbox 为 true），则返回目前被选中的节点的 key 所组成的数组
    onSubmit() {
      // console.log(this.$refs.treeRef.getCheckedKeys())
      this.assignPermission() // 分配权限
    },
    // 事件 - 属性菜单点击事件: 第一个参数可以获取到点击的当前项的对应数据
    handleNodeClick(data) {
      // console.log(data)
    }
  }
}
</script>

<style lang="scss" scoped>
.permission-btn {
  text-align: right;
  margin-top: 25px;
}
</style>
